Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS z-index attribute

The z-index property in CSS is used to control the stacking order of elements on the web page along the z-axis (the third dimension, which is perpendicular to the screen). Elements with a higher z-index value are stacked above elements with a lower z-index value. The z-index property only works on positioned elements (those with a position of relative, absolute, fixed, or sticky).

Basic Usage

You can set the z-index property like this:

css

.element {
    position: relative; /* or absolute, fixed, sticky */
    z-index: 10; /* Higher values are placed above lower values */
}

Example

Here are some examples to illustrate the use of z-index:

Example 1: Basic Stacking

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index Example</title>
    <style>
        .box1 {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: red;
            z-index: 1; /* Lower stacking order */
        }
        .box2 {
            position: absolute;
            top: 80px;
            left: 80px;
            width: 100px;
            height: 100px;
            background-color: blue;
            z-index: 2; /* Higher stacking order */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

In this example, .box2 is placed above .box1 because it has a higher z-index value.

Example 2: Negative z-index

css

.element {
    position: relative; /* or absolute, fixed, sticky */
    z-index: -1; /* Places the element behind other elements */
}

A negative z-index value places the element behind other elements.

By using the z-index property, you can control the stacking order of elements to achieve the desired layout and visual effects. Let me know if you need more details or examples!